<template>
  <div class="box-head">
    <div
      @click="tabClick(item.value)"
      :class="{ bg: tab == item.value }"
      v-for="(item, index) in tabList"
      :key="item.id"
    >
      {{ item.name }}
    </div>
  </div>
  <div class="context1">
    <div class="item" @click="goDetail(item.id)" v-for="(item, index) in list">
      <img :src="item.author.avatar_url" alt="" />
      <p style="width: 100px; text-align: center">
        {{ item.reply_count }}/{{ item.visit_count }}
      </p>
      <div class="tag" style="width: 50px">
        <el-tag class="ml-2" type="success" v-if="item.tab == 'ask'"
          >精华</el-tag
        >
        <el-tag class="ml-2" type="info" v-if="item.tab == 'job'">问答</el-tag>
        <el-tag class="ml-2" type="warning" v-if="item.tab == 'share'"
          >分享</el-tag
        >
        <el-tag class="ml-2" type="danger" v-if="item.tab == 'good'"
          >招聘</el-tag
        >
      </div>
      <p style="flex: 1">{{ item.title }}</p>
      <p>{{ new Date(item.create_at).toLocaleString() }}</p>
    </div>
  </div>
  <el-pagination
    v-model:current-page="query.page"
    v-model:page-size="query.limit"
    :page-sizes="[20, 40, 60, 80]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="getList"
    @current-change="getList"
  />
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { firstListApi, getDetailApi } from "../api/api";
const router = useRouter();
const tab = ref("");
const tabList = ref([
  {
    name: "全部",
    id: 1,
    value: "",
  },
  {
    name: "精华",
    id: 2,
    value: "ask",
  },
  {
    name: "分享",
    id: 3,
    value: "share",
  },
  {
    name: "问答",
    id: 4,
    value: "job",
  },
  {
    name: "招聘",
    id: 5,
    value: "good",
  },
]);
const query = reactive({
  page: 1,
  limit: 20,
});
const list: any = ref([]);
const tabClick = (name: any) => {
  console.log(name);
  tab.value = name;
  console.log(tab.value);
  getList();
};
const getList = () => {
  firstListApi({ tab: tab.value, ...query }).then((res: any) => {
    console.log(res);
    list.value = res.data;
  });
};
getList();
const goDetail = (id: string) => {
  router.push({
    path: "/detail",
    query: { id },
  });
};
</script>

<style lang="scss">
h3 {
  font-weight: normal;
  color: gray;
  font-size: 16px;
  margin: 12px 0;
  span:first-child {
    margin-right: 10px;
  }
}
.context {
  height: calc(100vh - 120px);
  background-color: #e1e1e1;
  .box {
    display: flex;
    height: 100%;
    padding: 1% 10%;
    box-sizing: border-box;
    background-color: #e1e1e1;
    .box-left {
      width: 80%;
      background-color: #fff;
      .context1 {
        height: 87%;
        overflow-y: auto;
        .item {
          padding: 5px;
          display: flex;
          align-items: center;
          margin: 15px 0;
          // padding: 0 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
        }
        .item:hover {
          background-color: #eee;
        }
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }
      .box-head {
        height: 50px;
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        padding: 0 20px;
        div {
          margin: 0 20px;
          padding: 5px 10px;
          box-sizing: border-box;
          color: #80bd01;
          border-radius: 10px;
        }
      }
    }
  }
}
.bg {
  background-color: #80bd01;
  color: #fff !important;
}
.box-right {
  width: 20%;
  background-color: #e1e1e1;
  margin-left: 1%;
  .top {
    background-color: #fff;
    padding: 4%;
    box-sizing: border-box;
    p:nth-child(1) {
      margin-bottom: 10px;
    }
    p:nth-child(2) {
      margin-bottom: 5px;
    }
  }
  .middle {
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 15px;
    .middle-head {
      width: 100%;
      height: 40px;
      display: flex;
      padding: 0 4%;
      align-items: center;
      background-color: #f6f6f6;
    }
    .middle-middle {
      padding: 4%;
      p:nth-child(1) {
        margin-top: 0;
      }
      p {
        margin: 5px 0;
        color: gray;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
